<template>
    <div class="wrap absolute">
        <div class="text">您在本课程已学习{{timeText(learnCount)}}</div>
        <!--<div class="progress absolute">-->
        <!--<div :style="{width:width+'%'}" class="progress-a absolute"></div>-->
        <!--</div>-->
    </div>
</template>

<script>
    import TimeText from '../mixins/TimeText'

    export default {
        mixins: [TimeText],
        props: {learnCount: Number},
        data() {
            return {width: 0, interval: null}
        },
        methods: {
            accumulate() {
                let self = this;
                let millSeconds = 100;
                this.width = 0;
                this.interval = setInterval(() => {
                    self.width = Math.min(self.width + 300 / millSeconds
                        , 100);
                }, millSeconds)
            }
        },
        watch: {
            learnCount() {
                clearInterval(this.interval);
                this.width = 0;
                this.interval = null;
                this.accumulate();
            }
        },
        created() {
            this.accumulate();
        }

    }
</script>

<style scoped lang="scss">

    .wrap {
        position: fixed;
        bottom: 50px;
        right: 50px;
        background: rgba(0, 0, 0, .5);
        width: 200px;
        height: 50px;
        line-height: 50px;
        .text {
            text-align: center;
            color: #fff;
        }
        .progress {
            bottom: 0;
            height: 3px;
            width: 100%;
            background: #fff;
            .progress-a {
                height: 1px;
                background: red;
            }
        }
    }


</style>